<!--
 * @Author: liaoyu1992 1519778181@qq.com
 * @Date: 2022-11-04 09:20:51
 * @LastEditors: liaoyu1992 1519778181@qq.com
 * @LastEditTime: 2022-11-09 13:43:30
 * @FilePath: \kgantt\example\src\App.vue
 * @Description: 
-->
<script setup lang="ts">
import { ref } from "vue";
import { Gantt } from "@kgantt/core";
import { ViewMode, Task, ResourceArea, AreaMode } from "@kgantt/core/types/publicTypes";
const currentDate = new Date();
const tasks = ref<Task[]>([
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
    name: "Some Project",
    id: "ProjectSample",
    progress: 25,
    type: "project",
    hideChildren: false,
    displayOrder: 1,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2, 12, 28),
    name: "Idea",
    id: "Task 0",
    progress: 45,
    type: "task",
    project: "ProjectSample",
    displayOrder: 2,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
    name: "Research",
    id: "Task 1",
    progress: 25,
    dependencies: ["Task 0"],
    type: "task",
    project: "ProjectSample",
    displayOrder: 3,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
    name: "Discussion with team",
    id: "Task 2",
    progress: 10,
    dependencies: ["Task 1"],
    type: "task",
    project: "ProjectSample",
    displayOrder: 4,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
    name: "Developing",
    id: "Task 3",
    progress: 2,
    dependencies: ["Task 2"],
    type: "task",
    project: "ProjectSample",
    displayOrder: 5,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
    name: "Review",
    id: "Task 4",
    type: "task",
    progress: 70,
    dependencies: ["Task 2"],
    project: "ProjectSample",
    displayOrder: 6,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
    name: "Release",
    id: "Task 6",
    progress: currentDate.getMonth(),
    type: "milestone",
    dependencies: ["Task 4"],
    project: "ProjectSample",
    displayOrder: 7,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19),
    name: "Party Time",
    id: "Task 9",
    progress: 0,
    isDisabled: true,
    type: "task",
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
    name: "Some Project11",
    id: "ProjectSample1",
    progress: 25,
    type: "project",
    hideChildren: false,
    displayOrder: 8,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2, 12, 28),
    name: "Idea",
    id: "Task 10",
    progress: 45,
    type: "task",
    project: "ProjectSample1",
    displayOrder: 9,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
    name: "Research",
    id: "Task 11",
    progress: 25,
    dependencies: ["Task 10"],
    type: "task",
    project: "ProjectSample1",
    displayOrder: 10,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
    name: "Discussion with team",
    id: "Task 12",
    progress: 11,
    dependencies: ["Task 10"],
    type: "task",
    project: "ProjectSample1",
    displayOrder: 11,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
    name: "Developing",
    id: "Task 13",
    progress: 2,
    dependencies: ["Task 12"],
    type: "task",
    project: "ProjectSample1",
    displayOrder: 12,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
    name: "Review",
    id: "Task 14",
    type: "task",
    progress: 70,
    dependencies: ["Task 12"],
    project: "ProjectSample1",
    displayOrder: 13,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
    name: "Release",
    id: "Task 16",
    progress: currentDate.getMonth(),
    type: "milestone",
    dependencies: ["Task 14"],
    project: "ProjectSample1",
    displayOrder: 14,
  },
  {
    start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),
    end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19),
    name: "Party Time",
    id: "Task 19",
    progress: 0,
    isDisabled: true,
    type: "task",
  },
]);
const getStartEndDateForProject = (tasks: Task[], projectId: string) => {
  const projectTasks = tasks.filter((t) => t.project === projectId);
  let start = projectTasks[0].start;
  let end = projectTasks[0].end;

  for (let i = 0; i < projectTasks.length; i++) {
    const task = projectTasks[i];
    if (start.getTime() > task.start.getTime()) {
      start = task.start;
    }
    if (end.getTime() < task.end.getTime()) {
      end = task.end;
    }
  }
  return [start, end];
};
const resourceArea = ref<ResourceArea[]>([
  {
    fieldId: "name",
    name: "名称",
    expand: true,
  },
  {
    fieldId: "start",
    name: "开始时间",
    type: AreaMode.Date,
  },
  {
    fieldId: "end",
    name: "结束时间",
  },
  {
    fieldId: "progress",
    name: "进度",
    type: AreaMode.Input,
  },
  {
    fieldId: "type",
    name: "类型",
  },
]);
</script>

<template>
  <div>
    <Gantt
      :tasks="tasks"
      :view-mode="ViewMode.HalfDay"
      :list-cell-width="155"
      :gantt-height="400"
      :resource-area="resourceArea"
    />
  </div>
</template>
